import React, { Component } from 'react';
import { StyleSheet, ScrollView, Alert } from 'react-native';
import {
  View,
  Text,
  GridList,
  GridListItem,
  Spacings,
  BorderRadiuses,
  Colors,
  Typography,
  GridListProps,
} from 'react-native-ui-lib';
import products from '../../data/products';
import { TestCase, TestSuite } from '@rnoh/testerino';

class GridListScreen extends Component {
  state = {
    demoContainerWidth: 350,
  };

  renderItem: GridListProps<(typeof products)[0]>['renderItem'] = ({ item }) => {
    return (
      <GridListItem
        itemSize={{ width: '100%', height: 150 }}
        imageProps={{ source: { uri: item.mediaUrl } }}
        title={item.name}
        subtitle={item.formattedPrice}
      />
    );
  };

  renderCustomItem: GridListProps<(typeof products)[0]>['renderItem'] = ({
    item,
  }) => {
    return (
      <View
        style={{
          borderWidth: 1,
          borderColor: Colors.grey30,
          borderRadius: BorderRadiuses.br10,
          padding: 10,
          height: 100,
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <Text text70>{item.name}</Text>
        <Text text80>{item.formattedPrice}</Text>
      </View>
    );
  };

  render() {
    // Pre-defined long text for testing Lines property
    const longText = "This is a very long text that is intended to test the truncation capability of the component when the number of lines is restricted. It should go on and on.";

    return (
      <ScrollView>
        <TestSuite name="GridList">
          <TestCase itShould="GridList: itemSpacing=10, listPadding=15">
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View height={200} style={{ width: 600 }}>
                <GridList
                  data={products.slice(0, 6)}
                  renderItem={this.renderItem}
                  numColumns={3}
                  itemSpacing={10}
                  listPadding={15}
                  contentContainerStyle={styles.list}
                />
              </View>
            </ScrollView>
          </TestCase>

          <TestCase itShould="GridList: itemSpacing=20, listPadding=30">
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View height={200} style={{ width: 600 }}>
                <GridList
                  data={products.slice(0, 6)}
                  renderItem={this.renderItem}
                  numColumns={3}
                  itemSpacing={20}
                  listPadding={30}
                  contentContainerStyle={styles.list}
                />
              </View>
            </ScrollView>
          </TestCase>

          <TestCase itShould="GridList: numColumns=2">
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View height={200} style={{ width: 600 }}>
                <GridList
                  data={products.slice(0, 4)}
                  renderItem={this.renderItem}
                  numColumns={2}
                  itemSpacing={10}
                />
              </View>
            </ScrollView>
          </TestCase>

          <TestCase itShould="GridList: numColumns=4">
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View height={200} style={{ width: 600 }}>
                <GridList
                  data={products.slice(0, 8)}
                  renderItem={this.renderItem}
                  numColumns={4}
                  itemSpacing={10}
                />
              </View>
            </ScrollView>
          </TestCase>

          <TestCase itShould="GridList: containerWidth=500">
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View height={200} style={{ width: 500, backgroundColor: '#f0f0f0' }}>
                <GridList
                  data={products.slice(0, 4)}
                  renderItem={this.renderItem}
                  numColumns={2}
                  containerWidth={500}
                  itemSpacing={Spacings.s2}
                />
              </View>
            </ScrollView>
          </TestCase>

          <TestCase itShould="GridList: containerWidth=250">
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View height={200} style={{ width: 500, backgroundColor: '#f0f0f0' }}>
                <GridList
                  data={products.slice(0, 4)}
                  renderItem={this.renderItem}
                  numColumns={2}
                  containerWidth={250}
                  itemSpacing={Spacings.s2}
                />
              </View>
            </ScrollView>
          </TestCase>

          <TestCase itShould="GridList: maxItemWidth=100 (Responsive)">
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View height={200} style={{ width: 600 }}>
                <GridList
                  data={products.slice(0, 6)}
                  renderItem={this.renderItem}
                  maxItemWidth={100}
                  itemSpacing={Spacings.s2}
                />
              </View>
            </ScrollView>
          </TestCase>

          <TestCase itShould="GridList: maxItemWidth=200 (Responsive)">
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View height={200} style={{ width: 600 }}>
                <GridList
                  data={products.slice(0, 6)}
                  renderItem={this.renderItem}
                  maxItemWidth={200}
                  itemSpacing={Spacings.s2}
                />
              </View>
            </ScrollView>
          </TestCase>

          {/* UPDATED: This test case demonstrates 'keepItemSize'. 
            By providing two containers with different widths, we verify that the 
            number of columns is calculated automatically to preserve item size.
          */}
          <TestCase itShould="GridList: keepItemSize=true (Auto-calc Columns)">
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View style={{flexDirection: 'row'}}>
                {/* Case 1: Width 600 -> Fits 3 columns */}
                <View height={220} style={{ width: 600, marginRight: 20, borderWidth: 1, borderColor: Colors.grey50 }}>
                  <Text text90 margin-5>Container Width: 600</Text>
                  <GridList
                    data={products.slice(0, 6)}
                    renderItem={this.renderItem}
                    numColumns={3}
                    keepItemSize
                    itemSpacing={Spacings.s2}
                  />
                </View>

                {/* Case 2: Width 400 -> Should auto-calculate to 2 columns to keep item size */}
                <View height={220} style={{ width: 400, borderWidth: 1, borderColor: Colors.grey50 }}>
                   <Text text90 margin-5>Container Width: 400</Text>
                   <GridList
                    data={products.slice(0, 6)}
                    renderItem={this.renderItem}
                    numColumns={3} // Initial numColumns is 3, but keepItemSize overrides it on narrower width
                    keepItemSize
                    itemSpacing={Spacings.s2}
                  />
                </View>
              </View>
            </ScrollView>
          </TestCase>

          <TestCase itShould="GridListItem: Default Styling">
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View height={200} style={{ width: 600 }}>
                <GridList
                  data={products.slice(0, 2)}
                  numColumns={2}
                  renderItem={({ item }) => (
                    <GridListItem
                      itemSize={{ width: '100%', height: 180 }}
                      imageProps={{ source: { uri: item.mediaUrl } }}
                      title={item.name}
                      subtitle={item.formattedPrice}
                    />
                  )}
                />
              </View>
            </ScrollView>
          </TestCase>

          <TestCase itShould="GridListItem: Custom Colors & Typography">
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View height={250} style={{ width: 600 }}>
                <GridList
                  data={products.slice(0, 2)}
                  numColumns={2}
                  renderItem={({ item }) => (
                    <GridListItem
                      itemSize={{ width: '100%', height: 200 }}
                      imageProps={{ source: { uri: item.mediaUrl } }}
                      title="Custom Title"
                      titleColor={Colors.green30}
                      titleTypography={Typography.text90}
                      titleLines={1}
                      subtitle={longText}
                      subtitleColor={Colors.red30}
                      subtitleTypography={Typography.text80}
                      subtitleLines={3}
                      description="This is a very long description that should be truncated based on the lines prop."
                      descriptionColor={Colors.yellow30}
                      descriptionTypography={Typography.text70}
                      descriptionLines={3}
                    />
                  )}
                />
              </View>
            </ScrollView>
          </TestCase>

          <TestCase itShould="GridListItem: alignToStart=false (Default)">
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View height={200} style={{ width: 600 }}>
                <GridList
                  data={products.slice(0, 2)}
                  numColumns={2}
                  renderItem={({ item }) => (
                    <GridListItem
                      itemSize={{ width: '90%', height: 180 }}
                      imageProps={{ source: { uri: item.mediaUrl } }}
                      title={item.name}
                      alignToStart={false}
                    />
                  )}
                />
              </View>
            </ScrollView>
          </TestCase>

          <TestCase itShould="GridListItem: alignToStart=true">
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View height={200} style={{ width: 600 }}>
                <GridList
                  data={products.slice(0, 2)}
                  numColumns={2}
                  renderItem={({ item }) => (
                    <GridListItem
                      itemSize={{ width: '90%', height: 180 }}
                      imageProps={{ source: { uri: item.mediaUrl } }}
                      title={item.name}
                      alignToStart={true}
                    />
                  )}
                />
              </View>
            </ScrollView>
          </TestCase>

          <TestCase itShould="GridListItem: horizontalAlignment">
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View style={{ width: 900, height: 350, paddingTop: 10 }}>
                <GridList
                  data={products.slice(0, 3)}
                  numColumns={3}
                  itemSpacing={20}
                  renderItem={({ item, index }) => {
                    let alignValue = GridListItem.horizontalAlignment.left;
                    let label = "Left";
                    let borderColor = Colors.grey40;

                    if (index === 1) {
                      alignValue = GridListItem.horizontalAlignment.center;
                      label = "Center";
                      borderColor = Colors.blue30;
                    } else if (index === 2) {
                      alignValue = GridListItem.horizontalAlignment.right;
                      label = "Right";
                      borderColor = Colors.orange30;
                    }
                    return (
                      <GridListItem
                        itemSize={{ width: '100%', height: 200 }}
                        imageProps={{
                            source: { uri: item.mediaUrl },
                            resizeMode: 'contain',
                            style: { backgroundColor: '#f7f7f7', marginBottom: 10 }
                        }}
                        title={label}
                        titleLines={2}
                        subtitle="Alignment Test Content"
                        containerStyle={{
                            borderWidth: 2,
                            borderColor: borderColor,
                            borderRadius: 10,
                            padding: 5,
                            backgroundColor: Colors.white
                        }}
                        horizontalAlignment={alignValue}
                      />
                    );
                  }}
                />
              </View>
            </ScrollView>
          </TestCase>

          <TestCase itShould="GridListItem: overlayText=true">
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View height={200} style={{ width: 600 }}>
                <GridList
                  data={products.slice(0, 2)}
                  numColumns={2}
                  renderItem={({ item }) => (
                    <GridListItem
                      itemSize={{ width: '100%', height: 180 }}
                      imageProps={{ source: { uri: item.mediaUrl } }}
                      title={item.name}
                      subtitle={item.formattedPrice}
                      overlayText
                      overlayTextContainerStyle={{ backgroundColor: 'rgba(60, 212, 14, 0.5)' }}
                      titleColor={Colors.white}
                      subtitleColor={Colors.white}
                    />
                  )}
                />
              </View>
            </ScrollView>
          </TestCase>

          <TestCase itShould="GridListItem: overlayText=true (Custom Style)">
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View height={200} style={{ width: 600 }}>
                <GridList
                  data={products.slice(0, 2)}
                  numColumns={2}
                  renderItem={({ item }) => (
                    <GridListItem
                      itemSize={{ width: '100%', height: 180 }}
                      imageProps={{ source: { uri: item.mediaUrl } }}
                      title="Test overlayText"
                      subtitle="overlayText Test"
                      overlayText
                      overlayTextContainerStyle={{ backgroundColor: 'rgba(212, 166, 14, 0.93)' }}
                      titleColor={Colors.white}
                      subtitleColor={Colors.white}
                    />
                  )}
                />
              </View>
            </ScrollView>
          </TestCase>

          <TestCase itShould="GridListItem: Custom Render Overlay (Badge)">
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View height={200} style={{ width: 600 }}>
                <GridList
                  data={products.slice(0, 2)}
                  numColumns={2}
                  renderItem={({ item }) => (
                    <GridListItem
                      itemSize={{ width: '100%', height: 180 }}
                      imageProps={{ source: { uri: item.mediaUrl } }}
                      renderOverlay={() => (
                        <View
                          style={{
                            position: 'absolute',
                            top: 5,
                            right: 5,
                            backgroundColor: Colors.red30,
                            padding: 5,
                            borderRadius: 10,
                          }}>
                          <Text white text90>
                            New
                          </Text>
                        </View>
                      )}
                    />
                  )}
                />
              </View>
            </ScrollView>
          </TestCase>

          <TestCase itShould="GridListItem: Custom Render Overlay (VIP Tag)">
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View height={200} style={{ width: 600 }}>
                <GridList
                  data={products.slice(0, 2)}
                  numColumns={2}
                  renderItem={({ item }) => (
                    <GridListItem
                      itemSize={{ width: '100%', height: 180 }}
                      imageProps={{ source: { uri: item.mediaUrl } }}
                      renderOverlay={() => (
                        <View
                          style={{
                            position: 'absolute',
                            top: 20,
                            right: 20,
                            backgroundColor: Colors.blue30,
                            padding: 5,
                            borderRadius: 0,
                          }}>
                          <Text white text90>
                            VIP
                          </Text>
                        </View>
                      )}
                    />
                  )}
                />
              </View>
            </ScrollView>
          </TestCase>

          <TestCase itShould="GridListItem: Render Custom Item (Card Style)">
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View height={180} style={{ width: 600, backgroundColor: '#f2f2f2' }}>
                <GridList
                  data={products.slice(0, 2)}
                  numColumns={2}
                  listPadding={10}
                  itemSpacing={10}
                  renderItem={({ item }) => (
                    <GridListItem
                      itemSize={{ width: '100%' }}
                      onPress={() => Alert.alert('Card Pressed', item.name)}
                      renderCustomItem={() => (
                        <View
                          style={{
                            height: 120,
                            backgroundColor: Colors.white,
                            borderRadius: BorderRadiuses.br20,
                            padding: 12,
                            shadowColor: Colors.black,
                            shadowOpacity: 0.1,
                            shadowRadius: 4,
                            shadowOffset: { height: 3, width: 0 },
                            elevation: 5,
                            borderWidth: 1,
                            borderColor: Colors.blue60,
                            justifyContent: 'space-between'
                          }}>
                          
                          <View row spread centerV>
                            <Text text70 grey10 numberOfLines={1} style={{ flex: 1, marginRight: 5 }}>
                              {item.name}
                            </Text>
                            <View bg-blue30 br100 paddingH-8 paddingV-2>
                              <Text text90 white>NEW</Text>
                            </View>
                          </View>

                          <View row spread bottom>
                            <View>
                                <Text text90 grey40>Price</Text>
                                <Text text60 blue10>{item.formattedPrice}</Text>
                            </View>
                            <View bg-grey70 br20 padding-5>
                                <Text text80>🛒</Text>
                            </View>
                          </View>
                        </View>
                      )}
                    />
                  )}
                />
              </View>
            </ScrollView>
          </TestCase>

          <TestCase itShould="GridListItem: Interaction (onPress & containerProps)">
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View height={200} style={{ width: 600 }}>
                <GridList
                  data={products.slice(0, 4)}
                  numColumns={4}
                  renderItem={({ item }) => (
                    <GridListItem
                      itemSize={{ width: '100%', height: 180 }}
                      imageProps={{ source: { uri: item.mediaUrl } }}
                      title="Press Me"
                      onPress={() => Alert.alert('Pressed', `Item: ${item.name}`)}
                      containerProps={{
                        activeOpacity: 0.5,
                        style: { borderWidth: 2, borderColor: Colors.blue30 },
                      }}
                      testID={`grid-item-${item.id}`}
                    />
                  )}
                />
              </View>
            </ScrollView>
          </TestCase>

          <TestCase itShould="GridListItem: Interaction (onPress & containerProps - Red Border)">
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View height={200} style={{ width: 600 }}>
                <GridList
                  data={products.slice(0, 4)}
                  numColumns={4}
                  renderItem={({ item }) => (
                    <GridListItem
                      itemSize={{ width: '100%', height: 180 }}
                      imageProps={{ source: { uri: item.mediaUrl } }}
                      title="Press Me"
                      onPress={() => Alert.alert('Pressed', `Item: ${item.name}`)}
                      containerProps={{
                        activeOpacity: 0.8,
                        style: { borderWidth: 5, borderColor: Colors.red30 },
                      }}
                      testID={`grid-item-${item.id}`}
                    />
                  )}
                />
              </View>
            </ScrollView>
          </TestCase>

          <TestCase itShould="GridList: contentContainerStyle (Custom Background & Border)">
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View height={220} style={{ width: 600 }}>
                <GridList
                  data={products.slice(0, 3)}
                  renderItem={this.renderItem}
                  numColumns={3}
                  listPadding={10}
                  contentContainerStyle={{ 
                    backgroundColor: Colors.grey70, 
                    borderWidth: 2, 
                    borderColor: Colors.green30,
                    borderRadius: 10
                  }}
                />
              </View>
            </ScrollView>
          </TestCase>

          <TestCase itShould="GridList: contentContainerStyle (Custom Background & Border - Red)">
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View height={220} style={{ width: 600 }}>
                <GridList
                  data={products.slice(0, 3)}
                  renderItem={this.renderItem}
                  numColumns={3}
                  listPadding={10}
                  contentContainerStyle={{ 
                    backgroundColor: Colors.blue30, 
                    borderWidth: 5, 
                    borderColor: Colors.red30,
                    borderRadius: 0
                  }}
                />
              </View>
            </ScrollView>
          </TestCase>

          <TestCase itShould="GridListItem: containerStyle (Custom Border & Background)">
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View height={200} style={{ width: 600 }}>
                <GridList
                  data={products.slice(0, 2)}
                  numColumns={2}
                  renderItem={({ item }) => (
                    <GridListItem
                      itemSize={{ width: '90%', height: 180 }}
                      imageProps={{ source: { uri: item.mediaUrl } }}
                      title="Custom Style"
                      containerStyle={{
                        borderWidth: 3,
                        borderColor: Colors.purple30,
                        backgroundColor: Colors.purple70,
                        borderRadius: 20
                      }}
                    />
                  )}
                />
              </View>
            </ScrollView>
          </TestCase>

          <TestCase itShould="GridListItem: itemSize (Type: Number = 120)">
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View height={200} style={{ width: 600 }}>
                <GridList
                  data={products.slice(0, 2)}
                  numColumns={2}
                  renderItem={({ item }) => (
                    <GridListItem
                      itemSize={120}
                      imageProps={{ source: { uri: item.mediaUrl } }}
                      title="Size: 120"
                    />
                  )}
                />
              </View>
            </ScrollView>
          </TestCase>

          <TestCase itShould="GridListItem: itemSize (Type: Number = 80)">
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View height={200} style={{ width: 600 }}>
                <GridList
                  data={products.slice(0, 2)}
                  numColumns={2}
                  renderItem={({ item }) => (
                    <GridListItem
                      itemSize={80}
                      imageProps={{ source: { uri: item.mediaUrl } }}
                      title="Size: 80"
                    />
                  )}
                />
              </View>
            </ScrollView>
          </TestCase>

          <TestCase itShould="GridListItem: imageProps (resizeMode: cover)">
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View height={200} style={{ width: 600 }}>
                <GridList
                  data={products.slice(0, 2)}
                  numColumns={2}
                  renderItem={({ item }) => (
                    <GridListItem
                      itemSize={{ width: '90%', height: 150 }}
                      imageProps={{ 
                        source: { uri: item.mediaUrl },
                        resizeMode: 'cover',
                        style: { backgroundColor: Colors.grey60 } 
                      }}
                      title="Cover Mode"
                    />
                  )}
                />
              </View>
            </ScrollView>
          </TestCase>

           <TestCase itShould="GridListItem: imageProps (resizeMode: contain)">
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View height={200} style={{ width: 600 }}>
                <GridList
                  data={products.slice(0, 2)}
                  numColumns={2}
                  renderItem={({ item }) => (
                    <GridListItem
                      itemSize={{ width: '90%', height: 150 }}
                      imageProps={{ 
                        source: { uri: item.mediaUrl },
                        resizeMode: 'contain',
                        style: { backgroundColor: Colors.grey60 } 
                      }}
                      title="Contain Mode"
                    />
                  )}
                />
              </View>
            </ScrollView>
          </TestCase>

          <TestCase itShould="GridListItem: titleLines (Truncated to 1 line)">
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View height={250} style={{ width: 600 }}>
                <GridList
                  data={products.slice(0, 2)}
                  numColumns={2}
                  renderItem={({ item }) => (
                    <GridListItem
                      itemSize={{ width: '95%', height: 200 }}
                      imageProps={{ source: { uri: item.mediaUrl } }}
                      title={longText}
                      titleLines={1}
                      description="1 Line Title"
                    />
                  )}
                />
              </View>
            </ScrollView>
          </TestCase>

          <TestCase itShould="GridListItem: titleLines (Expanded to 3 lines)">
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View height={250} style={{ width: 600 }}>
                <GridList
                  data={products.slice(0, 2)}
                  numColumns={2}
                  renderItem={({ item }) => (
                    <GridListItem
                      itemSize={{ width: '95%', height: 200 }}
                      imageProps={{ source: { uri: item.mediaUrl } }}
                      title={longText}
                      titleLines={3}
                      description="3 Line Title"
                    />
                  )}
                />
              </View>
            </ScrollView>
          </TestCase>

        </TestSuite>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  list: {
    paddingTop: Spacings.s2,
  },
});

export default GridListScreen;